<template>
	<view class="container">
		<view v-if="rewardlist.length>0">
			<view class="palytourlist" v-for="item in rewardlist" :key="">
				<view class="palytour_title">
					<text>打赏时间：{{item.pay_time}}</text>
					<text>{{item.num-item.last_num}}人领取</text>
				</view>
				<view class="palytour_name">
					<view class="row palytour_name_list">
						<view class="row palytourrow">
							<image :src="url+'/static/imgs/playTourList_1.png'"></image>
							<text>打赏金额：</text>
						</view>
						<view class="playhover">【￥{{item.price}}】</view>
					</view>
					<view class="row palytour_name_list">
						<view class="row palytourrow">
							<image :src="url+'/static/imgs/playTourList_2.png'"></image>
							<text>打赏人数：</text>
						</view>
						<view>{{item.num}}</view>
					</view>
					<view class="row palytour_name_list">
						<view class="row palytourrow">
							<image :src="url+'/static/imgs/playTourList_3.png'"></image>
							<text>打赏留言：</text>
						</view>
						<view>{{item.remark}}</view>
					</view>
				</view>
			</view>
			<view class="mode">{{tishi_title}}</view>
		</view>
		
		
		<view class="col empty-view" v-if="ready==1">
			<image :src="url+'/static/imgs/list-empty-common.png'"></image>
			<text class="empty-text">你的打赏是空的哦</text>
			<view class="empty-button" @click="toPlayTour">快去打赏</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	import http from "@/common/js/request.js"
	export default {
		data() {
			return {
				rewardlist: [],
				currentPage: 1,
				url: app.globalData.baseImgUrl,
				tishi_title: "",
				ready: 2
			}
		},
		onLoad() {
			var that = this;
			that.myReward();
		},
		methods: {
			myReward() {
				var that = this;
				http.post("/api/v1/store/my_reward", {
					store_id: app.globalData.storeId,
					page: that.currentPage
				}, function(res) {
					console.log(res)
					var allpost = that.rewardlist;
					if (allpost == undefined) {
						allpost = [];
					}
					for (var i in res.datas) {
						allpost.push(res.datas[i])
					}
					if (res.datas.length < 10) {
						that.tishi_title = "已加载全部"
					} else {
						that.tishi_title = "正在加载中..."
					}
					that.rewardlist = allpost;
					that.ready = res.datas.length == 0 ? 1 : 2;
				})
			},
			onReachBottom() {
				console.log("sdlkjfkl");
				var that = this;
				if (that.ready == 2) {
					that.currentPage = that.currentPage + 1
					that.myReward();
				}
			},
			onPullDownRefresh() {
				var that = this;
				that.rewardlist = [];
				that.currentPage = 1;
				that.myReward();
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 500);
			},
			//跳转至打赏页面
			toPlayTour(e) {
				var that = this;
			
					uni.navigateTo({
						url: '/pages/store/playTour/playTour',
					})
			
			
			},
		}
	}
</script>

<style>
	/* 缺省样式 */
	.empty-view {
		margin-top: 183rpx;
		align-items: center;
		justify-content: center;
	}
	
	.empty-view image {
		width: 195rpx;
		height: 269rpx;
	}
	
	.empty-view .empty-text {
		margin-top: 80rpx;
		color: #333333;
		font-size: 36rpx;
	}
	
	.empty-view .empty-button {
		margin-top: 120rpx;
		width: 512rpx;
		height: 100rpx;
		background: rgba(255, 157, 17, 1);
		border-radius: 10rpx;
		font-size: 34rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	/* 缺省样式 */
	page{
		background: #f9f9f9;
	}
	.palytourlist {
		width: 685rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 3rpx 15rpx 3rpx rgba(230, 228, 228, 0.29);
		border-radius: 10rpx;
		margin: 30rpx auto 0;
	}

	.palytour_title {
		height: 72rpx;
		line-height: 72rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 20rpx;
		border-bottom: 1rpx solid #F1EFEF;
	}

	.palytour_title text {
		font-size: 28rpx;
		color: #939393;

	}

	.palytour_name {
		padding: 48rpx 13rpx;
	}

	.palytour_name_list:nth-child(1) image {
		width: 26rpx;
		height: 26rpx;
		margin-top: 16rpx;
	}

	.palytour_name_list:nth-child(2) image {
		width: 25rpx;
		height: 26rpx;
		margin-top: 18rpx;
	}

	.palytour_name_list:nth-child(3) image {
		width: 24rpx;
		height: 24rpx;
		margin-top: 18rpx;
	}

	.palytour_name_list .palytourrow {
		width:200rpx;
		margin-bottom: 10rpx;
		line-height: 60rpx;
	}

	.palytour_name_list .palytourrow text {
		font-size: 30rpx;
		margin-left: 10rpx;
		display: inline-block;
	}

	.palytour_name_list view:nth-child(2) {
		font-size: 30rpx;
		width: 460rpx;
		line-height: 60rpx;
		
	}

	.playhover {
		color: #FF0000;
	}
</style>
